<template>
    <div class="project_item">
        <div class="project_admin">
            <span class="icon el-icon-user-solid"></span>
            <span class="userName">{{ project_data.nickname || project_data.ownerUser}}</span>
        </div>
        <el-button v-if="showEventButton" class="editIcon" type="text" icon="el-icon-edit" @click="onEdit(project_data)" title="编辑"></el-button>
        <el-button v-if="showEventButton" class="deleteIcon" type="text" icon="el-icon-delete" @click="onDelete(project_data)" title="删除"></el-button>
        <div class="project_title">{{project_data.title}}</div>
        <div class="project_date">{{$moment(project_data.updateTime).format("YYYY-MM-DD")}}</div>
        <el-row class="bottonList">
            <el-button type="primary" class="runButton" icon="el-icon-video-play" @click="openWindow" title="启动项目">启动</el-button>
        </el-row>
        <br><br>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    props: ['project_data', 'onEdit', 'onDelete'],
    data() {
        return {
            showEventButton: false,
        }
    },
    mounted() {
        if (this.project_data.ownerUser == 'Local') {
            this.showEventButton = true;
        } else if (this.project_data.username == this.userData.username) {
            this.showEventButton = true;
        };
    },
    computed: {
        ...mapState("user", {
            userData: state => state.userData,
            ip: state => state.ip,
        }),
    },
    methods: {
        openWindow() {
            if (this.project_data.hasOwnProperty('username')) {
                this.$electron.ipcRenderer.send('open-content-window', JSON.stringify({
                    service: this.ip,
                    token: this.userData.userId,
                    project: this.project_data,
                }));
            } else {
                this.$electron.ipcRenderer.send('open-content-window', JSON.stringify({
                    service: 'root',
                    project: this.project_data,
                }));
            };
        }
    }
}
</script>
<style scoped>
    .project_item { height: 195px; position: relative; border-radius: 5px; overflow: hidden; width: 100%; box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25); margin: 0 0 15px 0; }
    .project_admin { padding: 25px 15px 10px 35px; position: absolute; left: 0; color: #666; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; right: 60px; }
    .project_admin .icon { position: absolute; left: 15px; top: 25px; }
    .project_title { padding: 0 15px; color: #444; font-size: 18px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden;line-height: 25px; padding-top: 60px; height: 50px; overflow: hidden; word-break:break-all; }
    .bottonList { position: absolute; bottom: 0; width: 100%;}
    .project_date { position: absolute; bottom: 50px; right: 15px; color: #999;}
    .editIcon { position: absolute; width: 30px; height: 30px; text-align: center; line-height: 30px; top: 5px; right: 40px; }
    .deleteIcon { position: absolute; width: 30px; height: 30px; text-align: center; line-height: 30px; top: 5px; right: 10px; color: tomato; }
</style>